<template>
    <view>
        <view class="form p-4">
            <view class="bg-white rounded-4 flex flex-center p-2 mb-4" v-for="(item, index) in form" :key="index">
                <view class="h9" v-if="item.nature==='TRUTH'">真心话</view>
                <view class="h9" v-else>大冒险</view>
                <input v-model="item.content" type="text" class="flex-1 font-weight-600 p-2" placeholder="请输入内容">
                <view class="p-2" @tap="remove(index)">
                    <uni-icons color="var(--xl-danger)" type="trash" />
                </view>
            </view>
        </view>
        <view class="pb-safe-area" style="height: 50px;"/>
        <view class="position-bottom pb-safe-area">
            <view class="p-4 flex grid-gap-4">
                <view class="bg-success text-white rounded-4 px-6 py-2 font-weight-600 text-center h8"
                    hover-class="bg-success-dark-1" @tap="create">新增</view>
                <view class="flex-1 bg-primary text-white rounded-4 px-6 py-2 font-weight-600 text-center h8"
                    hover-class="bg-primary-dark-1" @tap="save">保存并开始</view>
            </view>
        </view>
    </view>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { onLoad } from "@dcloudio/uni-app";
import { $page, useGameCustom } from '@/utils';
const gameCustom = useGameCustom('MINE_SWEEPER');
const form = ref<{
    nature: string,
    content: string,
    icon: string
}[]>([])
onLoad(() => {
    gameCustom.get().then((data: any) => {
        form.value = data || []
    }).catch(() => {})
})
const remove = (index: number) => {
    form.value.splice(index, 1)
}
const create = () => {
    uni.showActionSheet({
	itemList: ['真心话', '大冒险'],
	success: (res:any)=>{
        form.value.push({
            nature: res.tapIndex==0?'TRUTH':'DARE',
            content: '',
            icon: ''
        })
	}
});
}
const save = () => {
    if (form.value.length < 6) {
        return uni.showToast({
            title: '至少6个项目',
            icon: 'none'
        })
    }
    gameCustom.set(form.value).then(() => {
        $page.open(`/pages/game/MINE_SWEEPER?id=custom`);
    }).catch((msg: any) => {
        uni.showToast({
            title: msg || '保存失败',
            icon: 'none'
        })
    })
}
</script>

<style lang="scss" scoped>
.form {
    min-height: calc(100vh - var(--window-top));
}

.h9 {
    width: 60px;
}

.position-bottom {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--xl-white);
    z-index: 1;
}
</style>
